<template>
  <div class="patient-info-container">
    <h1>患者特征信息</h1>
    <p class="subtitle">请填写以下患者信息，以便系统进行个性化风险评估</p>
    
    <div class="form-section">
      <form @submit.prevent="savePatientInfo" class="patient-form">
        <div class="form-row">
          <div class="form-group half-width">
            <label for="age">年龄</label>
            <div class="input-with-unit">
              <input 
                id="age" 
                v-model.number="patientData.age" 
                type="number" 
                min="0"
                max="150"
                required 
                class="form-input"
                placeholder="请输入年龄"
              />
              <span class="unit">岁</span>
            </div>
          </div>
          
          <div class="form-group half-width">
            <label for="weight">体重</label>
            <div class="input-with-unit">
              <input 
                id="weight" 
                v-model.number="patientData.weight" 
                type="number" 
                min="0"
                max="300"
                required 
                class="form-input"
                placeholder="请输入体重"
              />
              <span class="unit">kg</span>
            </div>
          </div>
        </div>
        
        <div class="form-row">
          <div class="form-group half-width">
            <label for="gender">性别</label>
            <select id="gender" v-model="patientData.gender" required class="form-select">
              <option value="" disabled>请选择性别</option>
              <option value="male">男</option>
              <option value="female">女</option>
              <option value="other">其他</option>
            </select>
          </div>
        </div>
        
        <div class="form-row">
          <div class="form-group half-width">
            <label for="liverFunction">肝功能</label>
            <select id="liverFunction" v-model="patientData.liverFunction" required class="form-select">
              <option value="" disabled>请选择肝功能状态</option>
              <option value="normal">正常</option>
              <option value="mild">轻度异常</option>
              <option value="moderate">中度异常</option>
              <option value="severe">重度异常</option>
            </select>
          </div>
          
          <div class="form-group half-width">
            <label for="kidneyFunction">肾功能</label>
            <select id="kidneyFunction" v-model="patientData.kidneyFunction" required class="form-select">
              <option value="" disabled>请选择肾功能状态</option>
              <option value="normal">正常</option>
              <option value="mild">轻度异常</option>
              <option value="moderate">中度异常</option>
              <option value="severe">重度异常</option>
            </select>
          </div>
        </div>
        
        <div class="form-group">
          <label for="allergies">药物过敏史</label>
          <textarea 
            id="allergies" 
            v-model="allergiesInput" 
            placeholder="请输入药物过敏史，多个过敏史请用逗号分隔"
            rows="4"
            class="allergies-input"
          ></textarea>
          <div class="helper-text">例如：青霉素过敏, 磺胺类药物过敏</div>
        </div>
        
        <button type="submit" class="save-btn">保存患者信息</button>
      </form>
    </div>
    
    <div class="navigation-buttons">
      <button @click="goToInteractions" class="back-btn">返回相互作用检测</button>
      <button @click="goToRiskAssessment" class="next-btn">进行风险评估</button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
// @ts-ignore
import { useStore } from 'vuex'

interface PatientInfo {
  age: number
  weight: number
  gender: string
  liverFunction: string
  kidneyFunction: string
  allergies: string[]
}

const store = useStore()
const router = useRouter()

// 从store获取患者信息
const patientInfo = computed(() => store.state.patientInfo)

// 过敏史输入框的响应式数据
const allergiesInput = ref('')

// 患者数据的响应式对象
const patientData = ref({
  age: 0,
  weight: 0,
  gender: '',
  liverFunction: '',
  kidneyFunction: '',
  allergies: [] as string[]
})

// 当组件挂载时，从store初始化数据
onMounted(() => {
  if (patientInfo.value) {
    patientData.value = { ...patientInfo.value }
    allergiesInput.value = patientInfo.value.allergies.join(', ')
  }
})

// 保存患者信息
const savePatientInfo = () => {
  // 处理过敏史输入
  patientData.value.allergies = allergiesInput.value
    .split(',')
    .map(item => item.trim())
    .filter(item => item.length > 0)
  
  // 更新store中的患者信息
  store.dispatch('updatePatientInfo', patientData.value)
  
  alert('患者信息已保存')
}

// 导航到相互作用检测页面
const goToInteractions = () => {
  router.push('/interactions')
}

// 导航到风险评估页面
const goToRiskAssessment = () => {
  router.push('/risk-assessment')
}
</script>

<style scoped>
.patient-info-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 30px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.08);
}

.patient-info-container h1 {
  text-align: center;
  color: #2c3e50;
  margin-bottom: 10px;
  font-size: 2rem;
}

.patient-info-container .subtitle {
  text-align: center;
  color: #7f8c8d;
  margin-bottom: 30px;
  font-size: 1.1rem;
}

.form-section {
  background: #f8f9fa;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  margin-bottom: 30px;
}

.form-section h2 {
  color: #2c3e50;
  margin-top: 0;
  border-bottom: 2px solid #3498db;
  padding-bottom: 10px;
  font-size: 1.5rem;
}

.form-row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -10px;
}

.form-group {
  margin-bottom: 25px;
  padding: 0 10px;
  flex: 1 0 auto;
}

.form-group.half-width {
  flex: 1 0 calc(50% - 20px);
  min-width: 250px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: #2c3e50;
  font-size: 1rem;
}

.input-with-unit {
  position: relative;
  display: flex;
  align-items: center;
}

.input-with-unit .form-input {
  padding-right: 40px;
}

.unit {
  position: absolute;
  right: 15px;
  color: #7f8c8d;
  font-weight: 500;
}

.form-input, .form-select {
  width: 100%;
  padding: 14px;
  border: 2px solid #ddd;
  border-radius: 6px;
  font-size: 1rem;
  transition: all 0.3s;
  background: #ffffff;
  box-sizing: border-box;
}

.form-input:focus, .form-select:focus {
  border-color: #3498db;
  outline: none;
  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
  transform: translateY(-2px);
}

.form-input::placeholder {
  color: #bdc3c7;
}

.allergies-input {
  width: 100%;
  padding: 14px;
  border: 2px solid #ddd;
  border-radius: 6px;
  font-size: 1rem;
  transition: all 0.3s;
  background: #ffffff;
  box-sizing: border-box;
  resize: vertical;
}

.allergies-input:focus {
  border-color: #3498db;
  outline: none;
  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
  transform: translateY(-2px);
}

.helper-text {
  margin-top: 5px;
  font-size: 0.85rem;
  color: #7f8c8d;
}

.checkbox-group {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.checkbox-group input[type="checkbox"] {
  margin-right: 10px;
  transform: scale(1.2);
}

.save-btn {
  background: linear-gradient(135deg, #27ae60, #219653);
  color: white;
  padding: 16px 32px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1.1rem;
  font-weight: 600;
  display: block;
  margin: 30px auto 10px;
  transition: all 0.3s;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  width: 100%;
  max-width: 300px;
}

.save-btn:hover {
  background: linear-gradient(135deg, #219653, #1e8449);
  transform: translateY(-3px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}

.save-btn:active {
  transform: translateY(-1px);
}

.navigation-buttons {
  display: flex;
  justify-content: space-between;
  margin-top: 30px;
  padding: 20px 0;
  border-top: 1px solid #eee;
}

.back-btn,
.next-btn {
  padding: 14px 28px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 1.1rem;
  font-weight: 600;
  transition: all 0.3s;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  min-width: 150px;
  text-align: center;
}

.back-btn {
  background: linear-gradient(135deg, #95a5a6, #7f8c8d);
  color: white;
  text-decoration: none;
}

.back-btn:hover {
  background: linear-gradient(135deg, #7f8c8d, #6c7a7c);
  transform: translateY(-3px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}

.next-btn {
  background: linear-gradient(135deg, #3498db, #2980b9);
  color: white;
  text-decoration: none;
}

.next-btn:hover {
  background: linear-gradient(135deg, #2980b9, #2573a7);
  transform: translateY(-3px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}

@media (max-width: 768px) {
  .patient-info-container {
    padding: 20px;
  }
  
  .form-section {
    padding: 20px;
  }
  
  .form-group.half-width {
    flex: 1 0 100%;
  }
  
  .navigation-buttons {
    flex-direction: column;
    gap: 15px;
  }
  
  .back-btn,
  .next-btn {
    width: 100%;
    padding: 12px;
  }
}
</style>